<template>
    <div class="note-paper">
      <header class="header">
        <div class="logo">便签</div>
        <SearchBar />
      </header>
      <TagBar />
      <main class="main-content">
        
        
        <div class="notes-container">
          <div class="notes-grid">
            <NoteCard 
              v-for="note in store.filteredNotes" 
              :key="note.id"
              :note="note" 
              @update:note="handleNoteUpdate"
              @delete="handleNoteDelete"
            />
          </div>
          
          <button class="add-note-btn" @click="addNewNote" v-if="store.filteredNotes.length === 0">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span>新建便签</span>
          </button>
        </div>
      </main>
    </div>
  </template>
  
  <script setup>
  import { useNoteStore } from './stores/noteStore'
  
  import SearchBar from './components/SearchBar.vue'
  import TagBar from './components/TagBar.vue'
  import NoteCard from './components/NoteCard.vue'
  import { watch } from 'vue'
  
  const store = useNoteStore()
  
  // 初始化数据
  if (store.notes.length === 0) {
    store.addNote()
  }
  
  function handleNoteUpdate(updatedNote) {
    store.updateNote(updatedNote.id, updatedNote)
  }
  
  function handleNoteDelete(noteId) {
    store.deleteNote(noteId)
  }
  
  function addNewNote() {
    store.addNote()
  }
  
  
  </script>
  
  <style lang="scss">
  @import './styles/_variables.scss';
  @import './styles/_mixins.scss';
  
  
  .note-paper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: $background-color;
    font-family: $font-family;
    overflow: hidden;
    
  }
  
  .header {
    // position: sticky;
    // top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: $header-bg;
    box-shadow: $shadow-sm;
    z-index: 10;
    
    .logo {
      font-size: 1.5rem;
      font-weight: 600;
      color: $primary-color;
    }
  }
  
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    
    
  }
  
  .notes-container {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
  }
  
  .notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
    margin: 0 auto;
    max-width: 1500px;
    
    @media (max-width: $mobile-breakpoint) {
      grid-template-columns: 1fr;
      padding: 1rem 0.5rem;
      gap: 1rem;
    }
  }
  
  .add-note-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem auto;
    padding: 0.75rem 1.5rem;
    background-color: $primary-color;
    color: white;
    border: none;
    border-radius: $border-radius;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: darken($primary-color, 10%);
      transform: translateY(-2px);
    }
    
    svg {
      width: 1rem;
      height: 1rem;
    }
  }
  </style>